  <template>
  <div class="h-full">
    <el-header>
      <div class="fun">
        <ul class="tab-title">
          <li >
            <i class="side el-icon-s-operation" :class="side ? 'side-active' : 'side-reset'" title="侧边栏" @click="showSide(this)"></i>
          </li>
          <li style="line-height: 60px">|</li>
          <!--- 给li标签绑定click时间,点击该li标签将索引传给函数重新赋值给num--->
          <li v-for="(item,index) in menuTabs" :key="`${index}index`"  @click="menuTab(index,item.path,item.name)">
            <i class="icon-style" :title="item.meta.title" :class="[item.meta.icon, num === index ? 'active' : '']"></i>
          </li>
        </ul>
      </div>
      <el-dropdown class="user_Info">
        <user-information class="user_Info"/>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item class="el-dropdown-item" icon="el-icon-warning" @click.native="logoutClick()"> 登出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside :class="side ? 'side-wrap-reset' : 'side-wrap-active'" >
        <div class="side-wrap">
          <el-menu
            :default-active="menuIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#283046"
            text-color="#fff"
            active-text-color="#7367f0" style="text-align:left;">
            <el-menu-item :index="`${index+1}`" v-for="(item, index) in sideMenu" :key="`${index}index`" @click="menuTab(index,item.path,item.name)">
              <template slot="title">
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
              </template>
               <el-menu-item :key="`${key}key`" :index="`${index+1}-${key+1}}`" @click="menuTab(key,value.path,value.name)" v-for="(value,key) in item.children">
                  <i :class="value.meta.icon"></i>
                  {{ value.meta.title }}
                </el-menu-item>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <transition name="fade">
          <router-view></router-view>
<!--          <div class="main-wrap" v-for='(itemCon,index) in tabContents' :key="`${index}index`" v-show="index == num">-->
<!--            {{itemCon}}-&#45;&#45;&#45;&#45;{{index}}-->
<!--          </div>-->
        </transition>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import bus from '../../assets/common/js/bus'
import UserInformation from './userInformation'
import { routes } from '@/router'
import { logout } from '@/api/user'
export default {
  name: 'HomeContainer',
  components: {UserInformation},
  props: {
    msg: String
  },
  data: function () {
    return {
      curUserData: [],
      menuTabs: [],
      tabContents: ['内容一', '内容二', '内容三'],
      num: 0,
      side: false,
      sideMenu: [],
      menuIndex: '1'
    }
  },
  computed: {},
  updated: () => {
    console.log(this.$route)
  },
  watch: {
    $route () {
      console.log('===================')
      console.log(this.$route)
    }
  },
  methods: {
    logoutClick () {
      logout().then(res => {
        this.$router.push('/login')
      })
    },
    menuTab: function (index, path, name) {
      this.num = index
      console.log(path)
      this.$router.push({
        path: path
      })
    },
    showSide: function () {
      this.side = !this.side
    },
    infoClick: function (path) {
      // console.log(path)
      this.$router.push({
        path: path
      })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  created () {
  },
  mounted () {
    let list = routes.filter(item => item.name === 'HomeContainer')[0].children
    this.menuTabs = list
    this.sideMenu = list
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.h-full{
  height: 100%;
}
.fun{
  //width: calc(100% - 120px);
  height: 100%;
  float: left;
}
.fun ul{
  height: 100%;
  padding: 0 0;
  margin: 0 0;
  list-style-type: none;
}
.fun ul li{
  float: left;
  margin: 0 10px;
  & .icon-style{
    height: 60px;
    font-size: 24px;
    line-height: 60px;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom:2px solid #283046;
    &:hover, &.active{
      color: #7367f0;
      border-bottom:2px solid #7367f0;
    }
  }
}
.side{
  height: 60px;
  font-size: 24px;
  line-height: 60px;
  color: #7367f0;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom:2px solid #283046;
}

.side-active{
  transition-duration: .5s;
  transform: rotate(-90deg);
  -ms-transform: rotate(30deg);
}
.side-reset{
  transition-duration: .5s;
  transform: rotate(0deg);
  -ms-transform: rotate(30deg);
}
.side-wrap{
  height: 100%;
  width: 100%;
  background: #283046;
  border-radius: 6px;
}
.side-wrap-active{
  transition-duration: .5s;
  width: 300px;
  padding: 20px 0 20px 10px;
  flex: 2;
}
.side-wrap-reset{
  transition-duration: .5s;
  width: 0px!important;
  padding: 20px 0 20px 0!important;
  flex: 0;
  //display: none;
}

.user_Info{
  height: 100%;
  //width: 120px;
  //flex: 1;
  float: right;
  display: flex;
  //flex-direction:row-reverse;
  cursor: pointer;
  box-sizing: border-box;
  color: #ffffff;
  border-bottom:1px solid #283046;
    &:hover{
     border-bottom: 1px solid #7367f0;
      //box-shadow: 2px 2px 2px #ccc;
   }
}
.el-container{
  width: 100%;
  height: calc(100% - 60px);
  flex: 13;
}
.el-header{
  background-color: #283046;
  width: 100%;
  height: 80px;
  color: #d0d2d6;
  //display: flex;
  //flex-direction: row;
}
.el-aside {
  background-color: #161d31;
  color: #ffffff;
  text-align: center;
  height: 100%;
  //flex: 2;
  padding: 20px 0 20px 10px;
  overflow: hidden;
}

.el-main {
  background-color: #161d31;
  /* opacity: 10%; */
  color: #ffffff;
  text-align: center;
  height: 100%;
  width: 100%;
  flex: 11;
  overflow: hidden;
  /* border: 1px solid red; */
}
.main-wrap{
  background-color: #283046;
  height: 100%;
  border-radius: 6px;
}
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .5s;
}

.fade-enter-active {
  transition-delay: .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
//头像下拉菜单
// .el-dropdown-menu{
//   background: #283046;
//   border: 1px solid #283046;
// }
// .el-dropdown-item{
//   background: #283046;
//   color: #d0d2d6;
//   padding-left: 10px;
//   border: none;
//   &:hover{
//     background: #161d31;
//     color: #7367f0;
//   }
// }
// 这是头像下下拉框的小尖尖
// .el-popper[x-placement^=bottom] .popper__arrow {
//   top: -6px;
//   left: 50%;
//   margin-right: 3px;
//   border-top-width: 0;
//   border-bottom-color: #283046!important;
// }
// .el-popper[x-placement^=bottom] .popper__arrow::after {
//   top: 1px;
//   margin-left: -6px;
//   border-top-width: 0;
//   border-bottom-color: #283046!important;
// }
// 菜单的样式
// .el-menu-vertical-demo{
//   width: 100%;
//   height: 100%;
//   text-align: left;
// }

</style>
